<template>
  <dv-border-box-1 backgroundColor="rgba(5, 29, 53, 0.9)" class="btnBox">
    <div class="boxTop">
      <dl @click="leftBtnClick('班次详情')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/workdetail.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>班次详情</dd>
      </dl>
      <dl @click="leftBtnClick('指标分析')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/targetanalysis.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>指标分析</dd>
      </dl>
      <dl @click="leftBtnClick('台班计量')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/workcalculate.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>台班计量</dd>
      </dl>
    </div>
    <div class="boxTop">
      <dl @click="leftBtnClick('轨迹回放')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/trackplay.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>轨迹回放</dd>
      </dl>
      <dl @click="leftBtnClick('台班月报')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/videomonitor.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>台班月报</dd>
      </dl>
      <dl @click="leftBtnClick('视频监控')">
        <dt
          :style="{
            backgroundImage:
              'url(' +
              require('../../../../../assets/images/sweepercar/workMonthReport.png') +
              ')',
            backgroundRepeat: 'no-repeat',
          }"
        ></dt>
        <dd>视频监控</dd>
      </dl>
    </div>
    <!--    弹出层-->
    <div class="cleanCar-content-theory" v-if="data.analyzeShow">
      <!-- :color="['#2290fe', '#2290fe']" -->
      <dv-border-box-1
        :color="['#2290fe', '#2290fe']"
        backgroundColor="rgba(5, 29, 53, 0.9)"
        class="dv-border-box-1"
      >
        <div class="cleanCar-content-theory-score">
          <span @click="popupsClose"> </span>
          <div class="cleanCar-content-right-title">
            {{ data.popusValue }}
          </div>
        </div>
        <div class="cleanCar-content-theory-botton">
          <Workdetail v-if="data.popusValue == '班次详情'" />
          <Targetanalysis v-if="data.popusValue == '指标分析'" />
          <Workcalculate v-if="data.popusValue == '台班计量'" />
          <Trackplay v-if="data.popusValue == '轨迹回放'" />
          <WorkMonthReport v-if="data.popusValue == '台班月报'" />
          <Videomonitor v-if="data.popusValue == '视频监控'" />
        </div>
      </dv-border-box-1>
    </div>
  </dv-border-box-1>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick, toRefs, onMounted } from "vue";
import Workdetail from "../popups/workdetail/workdetail.vue";
import Targetanalysis from "../popups/targetanalysis/targetanalysis.vue";
import Workcalculate from "../popups/workcalculate.vue";
import Videomonitor from "../popups/videomonitor.vue";
import Trackplay from "../popups/trackplay.vue";
import WorkMonthReport from "../popups/workMonthReport.vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
const data = reactive({
  analyzeShow: false,
  popusValue: "",
});
// 左侧按钮点击
const leftBtnClick =async (val: string) => {
  data.popusValue = val;
  data.analyzeShow = true;
};
// 弹框关闭
const popupsClose = () => {
  data.popusValue = "";
  data.analyzeShow = false;
};

onMounted(() => {});
</script>
<style scoped lang="less" >
.btnBox {
  color: white;
  height: 11rem;
  /deep/ .border-box-content {
    padding: 1.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .boxTop {
      display: flex;
      justify-content: space-around;
      align-items: center;
      dl {
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        font-size: 0.2rem;
        text-align: center;
        cursor: pointer;
        dt {
          display: inline-block;
          width: 2rem;
          height: 2rem;
          background-size: 100% auto;
        }
        dd {
          padding-top: 2px;
          width: 100%;
          overflow: hidden; //溢出隐藏
          word-break: keep-all; //
          white-space: nowrap; //文本不折行
          text-overflow: ellipsis; //显示省略符号来代表被修剪的文本
        }
      }
    }
  }
}
.cleanCar-content-theory {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.cleanCar-content-theory .dv-border-box-1 {
  width: 80%;
  height: 80%;
}
.cleanCar-content-theory-score > span {
  margin-top: 30px;
  margin-right: 30px;
  float: right;
  display: inline-block;
  cursor: context-menu;
  width: 25px;
  height: 25px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../../../../assets/images/sweepercar/xuanxuan-image.png")
    no-repeat;
  background-size: 100% 100%;
}
/deep/ .cleanCar-content-theory-botton {
  flex: 1;
  padding: 0 26px;
  overflow-y: auto;
}
.cleanCar-content-right-title {
  display: block;
  width: 20%;
  padding: 24px 0;
  font-weight: bolder;
  margin-top: 10px;
  color: #2290fe;
  font-size: 20px;
  background-image: url("../../../../../assets/images/sweepercar/blueImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  margin: 0 auto;
}
</style>